<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
		<div class="component-content banner-wrapper">
			<div class="flex center between">
				<div class="banner-top-title">{{moduleData.label_name_cn}}</div>
				<div class="flex center">
					<span class="curpage">{{curpage+1}}</span>
					<span v-if="moduleData.data" class="totalpage">/{{moduleData.data.length}}</span>
				</div>
			</div>
			<div class="banner-desc">{{moduleData.label_info_summary}}</div>
			<div class="banner-content" v-if="moduleData.data && moduleData.data.length>0">
				<div class="banner-img" :style="'background-image: url(\''+moduleData.data[0].image_url+'\');'"></div>
				<div class="banner-title">{{moduleData.data[0].title}}</div>
				<div class="banner-subtitle">{{moduleData.data[0].sub_title}}</div>
			</div>
			<!-- <Carousel dots="none" v-model="curpage">
				<CarouselItem v-for='(item,index) in moduleData.data' :key="'swiper'+index">
					<div class="banner-content">
						<div class="banner-img" :style="'background-image: url(\''+item.image_url+'\');'"></div>
						<div class="banner-title">{{item.title}}</div>
						<div class="banner-subtitle">{{item.sub_title}}</div>
					</div>
				</CarouselItem>
			</Carousel> -->
		</div>
	</div>
</template>

<script>

export default {
  	name: 'BannerModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {
        	curpage: 0
    	}
    },
    methods: {
    	delModule() {
			this.$emit("delModule",this.moduleData);		
    	}
    },
    created() {
    },
    components: {
	}
 }
</script>

<style scoped>

@import url("../baseModule.less");

.banner-top-title{font-size: 22px;color: #333;font-weight: bolder;line-height: 1.1;}
.banner-desc {
	font-size: 14px;
	color: #999;
	padding: 8px 0px 16px;
}
.curpage {
	font-size: 23px;
	color: #333;
}
.totalpage {
	line-height: 1.1;
	color: #999;
	transform: translateY(1px);
	font-size: 17px;
}
.banner-content {
	width: 100%;
}
.banner-img {
	width: 100%;
	height: 180px;
	background-repeat: no-repeat !important;
	background-size: cover!important;
	background-position: center!important;
}
.banner-title {
	font-size: 18px;
	color: #333;
	margin-top: 16px;
	font-weight: bolder;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.banner-subtitle {
	font-size: 14px;
	color: #999;
	margin-top: 8px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
</style>